<template>
	<view class="warp">
		<view class="tab">
			<u-tabs bar-width="80" :list="list" :is-scroll="false" active-color="#fd4954" inactive-color="#282828" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 提示 -->
		<view class="toast">
			推广类指标 (比如“推广商品数”) 因微信环境限制，无法准确判断员工是否推广分享到微信，仅能统计员工点击推广的操作次数，如用来考核，请考虑其准确性问题。
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 推广引流 -->
			<view class="promotion"v-for="(item,index) in intaiorlist">
				<view class="promotion_left">
					<view class="p_title">
						{{item.bigTitle}}
					</view>
					<view class="p_text">
					{{item.smallTitle}}
					</view>
				</view>
				<view v-if="item.show==true" class="promotion_right" @click="addtask(item)">
					添加
				</view>
				<view v-if="item.show==false" class="promotion_right_active" >
					添加
				</view>
			</view>
		</view>
		<view class="" style="padding-bottom: 50%;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				{name: '推广引流',id:0}, 
				{name: '客户跟进',id:1}, 
				{name: '业绩变现',id:2},
				{name: '分销裂变',id:3},
				],
				current: 0,
				intaiorlist:[],
			backlist:[]
				
			};
		},
		onLoad(e) {
			this.getintaiorlist()
			this.backlist=JSON.parse(decodeURIComponent(e.list))
		},
		methods:{
			// 获取任务指标
			getintaiorlist(){
				this.$request({
					url:'v3/task/front/appTaskIndexDetail/page',
					method:'GET',
					data:{
						indexType:this.current
					}
					
				}).then(res=>{
						this.intaiorlist=res.data.list
							this.intaiorlist.forEach(item=>{
								item.show=true
								this.backlist.forEach(val=>{
									
									if(item.id==val.id){
										item.show=false
									}
								})
							})
				})
				 
				// })
			},
			// 添加跳转
			addtask(item){
				console.log(item);
				// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				 let pages = getCurrentPages() 
				console.log(pages);
				 // 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length -2] 
				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				 prevPage.$vm.getValueS({type:"inditor",item:item}) 
				// 4. 返回上一页面
				 uni.navigateBack({
					 delta: 1 // 返回的页面数
				 })
			},
			change(index) {
			this.current = index;
			this.getintaiorlist()
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	background-color: #f7f7f7;
	color: #282828;
	font-family: PingFang-SC-Regular;
	.tab{
		width: 100%;
		height: 88rpx;
		border-top: 2rpx solid #cecece;
	}
	.toast{
		width: 100%;
	   padding: 20rpx 30rpx;
	   background-color: #faddbb;
	   color: #b17d3c;
	   font-size: 24rpx;
	}
	.content{
		width: 100%;
		margin-top: 20rpx;
		.promotion{
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
			padding: 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			.promotion_left{
				.p_title{
					font-size: 30rpx;
					font-weight: 550;
					margin-bottom: 10rpx;
				}
				.p_text{
					font-size: 26rpx;
					color: #cecece;
					width: 500rpx;
				}
			}
			.promotion_right{
				width: 140rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border: 2rpx solid #cecece;
				border-radius: 32rpx;
			}
			.promotion_right_active{
				width: 140rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border: 2rpx solid #cecece;
				border-radius: 32rpx;
				background-color: #f7f7f7;
			}
		}
	}
}
</style>
